<!--
// +----------------------------------------------------------------------
// | Created by PHPstorm: JRKAdmin框架 [ JRKAdmin ]
// +----------------------------------------------------------------------
// | Copyright (c) 2019~2022 [LuckyHHY] All rights reserved.
// +----------------------------------------------------------------------
// | SiteUrl: http://www.luckyhhy.cn
// +----------------------------------------------------------------------
// | Author: LuckyHhy <jackhhy520@qq.com>
// +----------------------------------------------------------------------
// | Date: 2020/3/2-14:12
// +----------------------------------------------------------------------
// | Description:
// +----------------------------------------------------------------------
*-->

{extend name='public/base' /}


{block name="content"}

<div class="layui-col-md12">

  <!--  <div class="layui-card">
        <div class="layui-card-body layui-row ">

            <blockquote class="layui-elem-quote layui-text">

            </blockquote>

        </div>

    </div>-->

    <div class="layui-card">

        <div class="layui-card-body">

            <!--内容区-->
            <div class="layui-form">

                <blockquote class="layui-elem-quote layui-text">
                    基于Layui的图标选择器，支持查询、分页、点击回调、渲染成功后回调等功能，提供手动选择图标事件。
                    <br >
                    <a href="https://gitee.com/wujiawei0926/iconpicker" target="_blank" >Layui-IconPicker</a>

                </blockquote>

                <div class="layui-form-item">
                    <label  class="layui-form-label">默认图标</label>
                    <div class="layui-input-block">
                        <input type="text" id="iconPicker" lay-filter="iconPicker" class="hide">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label  class="layui-form-label">自定义图标</label>
                    <div class="layui-input-block">
                        <input type="text" id="iconPicker1" value="fa-home" lay-filter="iconPicker2" class="hide">

                        <div class="layui-form-mid layui-word-aux">赋值</div>
                    </div>

                </div>

                <pre class="layui-code" lay-title="JavaScript" lay-skin="notepad">//代码区域
 iconPickerFa.render({
            // 选择器，推荐使用input
            elem: '#iconPicker',
            // fa 图标接口
            url: "__PLUGS__/font-awesome/less/variables.less",
            // 是否开启搜索：true/false，默认true
            search: true,
            // 是否开启分页：true/false，默认true
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 点击回调
            click: function (data) {
                console.log(data);
            },
            // 渲染成功后的回调
            success: function (d) {
                console.log(d);
            }
        });
      </pre>


                <blockquote class="layui-elem-quote layui-text">
                    基于 layui-icon
                    <br >
                    <a href="https://gitee.com/luckygyl/iconFonts" target="_blank" >Layui-iconFonts</a>
                </blockquote>


                {lv:inputform  label="选择图标："  name="icon" id="iconFonts"  place="请选择菜单图标"  verify="" /}


                <pre class="layui-code" lay-title="JavaScript" lay-skin="notepad">//代码区域
 IconFonts.render({
            // 选择器，推荐使用input
            elem: '#iconFonts',
            // 数据类型：fontClass/layui_icon，
            type: 'layui_icon',
            // 是否开启搜索：true/false
            search: true,
            // 是否开启分页
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 点击回调
            click: function (data) {
                //console.log(data);
            }
        });
      </pre>


            </div>


        </div>
    </div>

</div>


{/block}


{block name="js"} <!--js处理区-->



<script>

    layui.use(['element', 'IconFonts', 'form', 'jquery', 'lucky','iconPickerFa','code'], function () {
        var element = layui.element;
        var form = layui.form;
        var IconFonts = layui.IconFonts;
        var $ = layui.jquery;
        var lucky=layui.lucky;
        let iconPickerFa = layui.iconPickerFa;
        let code=layui.code;


        iconPickerFa.render({
            // 选择器，推荐使用input
            elem: '#iconPicker',
            // fa 图标接口
            url: "__PLUGS__/font-awesome/less/variables.less",
            // 是否开启搜索：true/false，默认true
            search: true,
            // 是否开启分页：true/false，默认true
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 点击回调
            click: function (data) {
                console.log(data);
            },
            // 渲染成功后的回调
            success: function (d) {
                console.log(d);
            }
        });

        iconPickerFa.render({
            // 选择器，推荐使用input
            elem: '#iconPicker1',
            // fa 图标接口
            url: "__PLUGS__/font-awesome/less/variables.less",
            // 是否开启搜索：true/false
            search: true,
            // 是否开启分页
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 点击回调
            click: function (data) {
                console.log(data);
            },
            // 渲染成功后的回调
            success: function (d) {
                console.log(d);
            }
        });



        //layui-icon图标选择器
        IconFonts.render({
            // 选择器，推荐使用input
            elem: '#iconFonts',
            // 数据类型：fontClass/layui_icon，
            type: 'layui_icon',
            // 是否开启搜索：true/false
            search: true,
            // 是否开启分页
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 点击回调
            click: function (data) {
                //console.log(data);
            }
        });



    });

</script >


{/block}
